<template>
  <view :data-theme="g.theme">
    <BasicComponents></BasicComponents>
    <CustomNavbar :title="customTitle"></CustomNavbar>
    <canvas canvas-id="myid" id="myid" class="charts" />
    <canvas canvas-id="myid2" id="myid2" class="charts2" />
    <canvas canvas-id="myid3" id="myid2" class="charts2" />
  </view>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { useKData } from "./hooks/use-k";
import uCharts from "@qiun/ucharts";
const g = useThemeStore();
const { option: macdOption } = useKData();
const { setTitle, customTitle } = useTitle();
let cWidth = ref(750);
let cHeight = ref(500);

onReady(() => {
  //这里的 750 对应 css .charts 的 width
  cWidth.value = uni.upx2px(700);
  //这里的 500 对应 css .charts 的 height
  cHeight.value = uni.upx2px(500);
});

onLoad(option => {
  init(option);
});

const init = async option => {
  setTitle(option.dm, "default");
  //模拟从服务器获取数据时的延时
  const params = {
    dm: option.dm,
    start: dayjs().subtract(3, "month").format("YYYY-MM-DD"),
    end: dayjs().format("YYYY-MM-DD")
  };
  const data: any = await homeFindNewChart(params);
  const { date, macd, dea, dif, k, cci } = data || {};
  macdOption.value.xAxis[0].data = date;
  macdOption.value.series[0].data = macd;
  macdOption.value.series[1].data = dea;
  macdOption.value.series[2].data = dif;
  macdOption.value.series[3].data = k;
  macdOption.value.series[4].data = cci;
  data.kk = data.kdj.map(item => {
    return item.k;
  });
  data.dd = data.kdj.map(item => {
    return item.d;
  });
  data.jj = data.kdj.map(item => {
    return item.j;
  });

  drawCharts("myid", data, 1);
  drawCharts("myid2", data, 2);
  drawCharts("myid3", data, 3);
};

const drawCharts = (id, data, flag: number) => {
  const ctx = uni.createCanvasContext(id, this);
  if (flag === 1) {
    new uCharts({
      type: "candle",
      context: ctx,
      width: cWidth.value,
      height: cHeight.value,
      categories: data.date,
      series: [
        {
          type: "candle",
          name: "12",
          data: macdOption.value.series[3].data
        }
        // {
        //   name: "曲线",
        //   type: "line",
        //   style: "curve",
        //   color: "#1890ff",
        //   disableLegend: true,
        //   data: [10, 5, 8, 13, 6, 8]
        // }
      ],
      animation: true,
      rotate: false,
      rotateLock: false,
      background: "#FFFFFF",
      color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
      padding: [15, 15, 0, 15],
      dataLabel: false,
      enableScroll: true,
      enableMarkLine: true,
      legend: {},
      xAxis: {
        labelCount: 4,
        gridEval: 0.5,
        itemCount: 40,
        disableGrid: false,
        gridColor: "#CCCCCC",
        gridType: "solid",
        dashLength: 4,
        scrollShow: true,
        scrollAlign: "left",
        scrollColor: "#A6A6A6",
        scrollBackgroundColor: "#EFEBEF"
      },
      yAxis: {},
      extra: {
        mix: {
          column: {
            width: 20
          }
        },
        candle: {
          color: {
            upLine: "#f04864",
            upFill: "#f04864",
            downLine: "#2fc25b",
            downFill: "#2fc25b"
          },
          average: {
            show: true,
            name: ["MA5", "MA10", "MA30"],
            day: [5, 10, 30],
            color: ["#1890ff", "#2fc25b", "#facc14"]
          }
        },
        tooltip: {
          showCategory: true
        }
      }
    });
  } else if (flag === 2) {
    new uCharts({
      type: "mix",
      context: ctx,
      width: cWidth.value,
      height: uni.upx2px(300),
      categories: data.date,
      series: [
        {
          name: "cci",
          type: "line",
          data: macdOption.value.series[4].data
        }
      ],
      animation: true,
      rotate: false,
      rotateLock: false,
      background: "#FFFFFF",
      color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
      padding: [15, 15, 0, 15],
      dataLabel: false,
      enableScroll: true,
      enableMarkLine: true,
      legend: {},
      xAxis: {
        labelCount: 4,
        itemCount: 40,
        disableGrid: false,
        gridColor: "#CCCCCC",
        gridType: "solid",
        dashLength: 4,
        scrollShow: true,
        scrollAlign: "left",
        scrollColor: "#A6A6A6",
        scrollBackgroundColor: "#EFEBEF"
      },
      yAxis: {},
      extra: {
        mix: {
          column: {
            width: 20
          }
        }
      }
    });
  } else {
    new uCharts({
      type: "mix",
      context: ctx,
      width: cWidth.value,
      height: uni.upx2px(300),
      categories: data.date,
      series: [
        {
          name: "k",
          type: "line",
          data: data.kk
        },
        {
          name: "d",
          type: "line",
          data: data.dd
        },
        {
          name: "j",
          type: "line",
          data: data.jj
        }
      ],
      animation: true,
      rotate: false,
      rotateLock: false,
      background: "#FFFFFF",
      color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
      padding: [15, 15, 0, 15],
      dataLabel: false,
      enableScroll: true,
      enableMarkLine: true,
      legend: {},
      xAxis: {
        labelCount: 4,
        itemCount: 40,
        disableGrid: false,

        gridColor: "#CCCCCC",
        gridType: "solid",
        dashLength: 4,
        scrollShow: true,
        scrollAlign: "center",
        scrollColor: "#A6A6A6",
        scrollBackgroundColor: "#EFEBEF"
      },
      yAxis: {},
      extra: {
        mix: {
          column: {
            width: 20
          }
        }
      }
    });
  }
};
</script>

<style>
/* 样式可以根据需要添加 */
.charts,
.charts2 {
  width: 750rpx;
  height: 500rpx;
}
.charts2 {
  height: 300rpx;
}
</style>
